<?php //传递跳转url,分类id,分类数据?>
<script src="__PUBLIC__/js/swiper-3.3.1.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/swiper-3.3.1.min.css">
<style>
#header .swiper-slide {
    padding: 0 20px;
    width: auto;
}
#header .swiper-slide-selected{
	color:red
}
#header {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 43px;
    overflow: hidden;
    background: #fdfdfc;
    font: 12px/40px hiragino sans gb, microsoft yahei, simsun;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
#top-line {
    width: 100%;
    height: 3px;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    background-color: #0fa6ea;
    background: -webkit-linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
    background: -moz-linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
    background: -ms-linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
    background: linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
}
.left_arrow{
	position: absolute;
    top: 10px;
    z-index: 1000;
    font-size: 26px;
    color: #2EBC82;
	background-image:url('/Public/img/two_left_arrow.png');
	background-size:contain;
	background-repeat:no-repeat;
	height:27px;
	width: 15px;
}
.right_arrow{
	position: absolute;
    top: 10px;
    z-index: 1000;
    font-size: 26px;
    color: #2EBC82;
	right:0px;
	background-image:url('/Public/img/two_right_arrow.png');
	background-size:contain;
	background-repeat:no-repeat;
	height:27px;
	width: 15px;
}
</style>
<if condition="!empty($article_cate)">
	<div id="header" class="swiper-container-horizontal swiper-container-free-mode">
		<div id="top-line"></div>
		<div class="swiper-wrapper">
			<foreach name="article_cate" item="vo" >
				<if condition="$vo['id'] == $cat_id">
					<div class="swiper-slide swiper-slide-selected" data-id="<{$vo['id']}>"><{$vo['cat_name']}></div>
				<else />
					<div class="swiper-slide" data-id="<{$vo['id']}>"><{$vo['cat_name']}></div>
				</if>
			</foreach>
		</div>
	</div>
	<div class="left_arrow"></div>
	<div class="right_arrow"></div>
</if>
<input type="hidden" id="cat_id" value="<{$cat_id}>">
<script>
//加载
window.onload = function() {
  var mySwiper1 = new Swiper('#header',{
	  freeMode : true,
	  slidesPerView : 'auto',
  });
  
  //点击事件
  $('.swiper-slide').on('click', function(e) {
		var id = $(this).attr('data-id');
		if(id == ''){
			return false;
		}
		window.location.href = "<{$article_cate_url}>?cat_id="+id+"";
  }); 
}
</script>